import 'package:flutter/material.dart';
import 'package:flutter_study/flutter/_18%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/model/scoped_count_model.dart';
import 'package:scoped_model/scoped_model.dart';

/*
使用scoped_model进行状态管理
  原理：Scoped model使用了观察者模式，将数据模型放在父代，后代通过找到父代的model进行数据渲染，
  最后数据改变时将数据传回，父代再通知所有用到了该model的子代去更新状态。

  我们则需要将它们放在顶层入口MaterialApp之上，这样就能进行全局的状态管理了
 */
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建并放置顶层model
    CountModel countModel = CountModel();
    return ScopedModel<CountModel>(
      model: countModel,
      child: MaterialApp(
        title: 'ScopedModel状态管理',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          splashColor: Colors.transparent,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('ScopedModel状态管理'),
          ),
          body: ContentPage(),
        ),
      ),
    );
  }
}

class ContentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (ctx) => Page1Screen()));
            },
            child: Text('page1'),
          ),
          SizedBox(
            height: 16,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (ctx) => Page2Screen()));
            },
            child: Text('page2'),
          ),
        ],
      ),
    );
  }
}

// 使用ScopedModelDescendant获取model
class Page1Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // rebuildOnChange：当model数据发生改变时是否需要rebuild页面，类似setStatus
    return ScopedModelDescendant<CountModel>(
      builder: (ctx, child, model) {
        return Scaffold(
          appBar: AppBar(
            title: Text('page1'),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => model.increment(),
            tooltip: 'Increment',
          ),
          body: Center(
            child: Text(
              "当前计数：${model.count}",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        );
      },
      rebuildOnChange: true,
    );
  }
}

// 使用ScopedModel获取model，或者直接重写model的of方法，方便管理
class Page2Screen extends StatefulWidget {
  @override
  _Page2ScreenState createState() => _Page2ScreenState();
}

class _Page2ScreenState extends State<Page2Screen> {
  @override
  Widget build(BuildContext context) {
    final model = CountModel().of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('page2'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => model.increment(),
        tooltip: 'Increment',
      ),
      body: Center(
        child: Text(
          "当前计数：${model.count}",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
